<template>
    <div class="dashboard-container" id="company-app">
        <div class="container">
            <div class="tableBar">
                <el-input v-model="input" placeholder="请输入展厅名称" style="width: 250px" clearable
                    @keyup.enter.native="handleQuery">
                    <i slot="prefix" class="el-input__icon el-icon-search" style="cursor: pointer" @click="init"></i>
                </el-input>
                <div class="tableLab">
                    <span class="span-btn delBut non" @click="deleteHandle('批量')">批量删除</span>
                    <span class="span-btn blueBug non" @click="statusHandle('1')">批量展示</span>
                    <span style="border:none;" class="span-btn delBut non" @click="statusHandle('0')">批量隐藏</span>
                    <el-button type="primary" @click="addSetMeal('add')">
                        + 新建展厅
                    </el-button>
                </div>
            </div>
            <el-table :data="tableData" stripe class="tableBox" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="25"></el-table-column>
                <el-table-column prop="name" label="展厅名称"></el-table-column>
                <el-table-column prop="image" label="图片" align="center">
                    <template slot-scope="{ row }">
                        <el-image style="width: auto; height: 40px; border:none;cursor: pointer;" :src="getImage(row.image)"
                            :preview-src-list="[row.image]">
                            <!-- TODO:注意上面的preview不是用来改api的，而是写好后给出服务器图片地址-->
                            <div slot="error" class="image-slot">
                                <img src="../../assets/images/noImg.png" style="width: auto; height: 40px; border:none;">
                            </div>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="categoryName" label="展厅分类"></el-table-column>
                <!--TODO 这里我想做一个省略号过长简介，然后点击查看全部的功能，但是测试下来看起来还好，有时间再考虑吧-->
                <el-table-column prop="description" label="展厅简介">
                    <template slot-scope="scope">
                        <span>{{ scope.row.description }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="展示状态">
                    <template slot-scope="scope">
                        <span>{{ scope.row.status == '0' ? '隐藏' : '展示' }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="updateTime" label="最后操作时间">
                </el-table-column>
                <el-table-column label="操作" width="160" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" class="blueBug" @click="addSetMeal(scope.row.id)">
                            修改
                        </el-button>
                        <el-button type="text" size="small" class="blueBug" @click="statusHandle(scope.row)">
                            {{ scope.row.status == '0' ? '展示' : '隐藏' }}
                        </el-button>
                        <el-button type="text" size="small" class="delBut non" @click="deleteHandle('单删', scope.row.id)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination class="pageList" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="counts" @size-change="handleSizeChange"
                :current-page.sync="page" @current-change="handleCurrentChange"></el-pagination>
        </div>
    </div>
</template>
  
<script>
import { getExhibitionPage, deleteExhibition, exhibitionStatusByStatus } from '../../api/exhibition.js';
import {download,upload,uploadModel} from '../../api/common'

export default {
    data() {
        return {
            input: '',
            counts: 0,
            page: 1,
            pageSize: 10,
            tableData: [],
            modelState: '',
            checkList: [],
        };
    },
    created() {
        this.init();
    },
    methods: {
        async init() {
            const params = {
                page: this.page,
                pageSize: this.pageSize,
                name: this.input ? this.input : undefined,
            };
            try {
                const res = await getExhibitionPage(params);
                if (String(res.code) === '1') {
                    this.tableData = res.data.records || [];

                    // 遍历tableData中的每个记录
                    this.tableData.forEach(record => {
                        if (record.description === "") {
                            record.description = "暂无简介";
                        }
                    });
                    this.tableData.forEach(record => {
                        console.log("Description: " + record.description);
                    });

                    this.counts = res.data.total;
                }
            } catch (err) {
                this.$message.error('请求出错了：' + err);
            }
        },
        getImage(image) {
            return image;
        },
        handleQuery() {
            this.page = 1;
            this.init();
        },
        // 添加
        addSetMeal(st) {
            if (st === 'add') {
                window.parent.menuHandle({
                    id: '/add-exhibition',
                    name: '添加展厅',
                    index:"1",
                }, true);
                this.$router.push('/add-exhibition'); // Navigate to the "Add Member" page
            } else {
                window.parent.menuHandle({
                    id: '/edit-exhibition/'+st,
                    name: '修改展厅',
                    index:"1",
                }, true);
                this.$router.push(`/edit-exhibition/${st}`); // Navigate to the "Edit Member" page with ID
            }
        },
        // 删除
        deleteHandle(type, id) {
            if (type === '批量' && id === null) {
                if (this.checkList.length === 0) {
                    return this.$message.error('请选择删除对象');
                }
            }
            this.$confirm('确定删除该展厅, 是否继续?', '确定删除', {
                'confirmButtonText': '确定',
                'cancelButtonText': '取消',
            }).then(() => {
                deleteExhibition(type === '批量' ? this.checkList.join(',') : id)
                    .then(res => {
                        if (res.code === 1) {
                            this.$message.success('删除成功！');
                            this.handleQuery();
                        } else {
                            this.$message.error(res.data.msg || '操作失败');
                        }
                    })
                    .catch(err => {
                        this.$message.error('请求出错了：' + err);
                    });
            }).catch(() => {
                // 用户点击取消按钮的处理逻辑
                // 可以不做任何处理，或者在这里添加一些取消操作的逻辑
            });
        },
        //状态更改
        statusHandle(row) {
            let params = {};
            if (typeof row === 'string') {
                if (this.checkList.length == 0) {
                    this.$message.error('批量操作，请先勾选操作展厅！');
                    return false;
                }
                params.ids = this.checkList.join(',');
                params.status = row;
            } else {
                params.ids = row.id;
                params.status = row.status ? '0' : '1';
            }
            this.$confirm('确认更改该展厅状态?', '提示', {
                'confirmButtonText': '确定',
                'cancelButtonText': '取消',
                'type': 'warning',
            }).then(() => {
                // 起售隐藏---批量起售隐藏接口
                exhibitionStatusByStatus(params)
                    .then(res => {
                        if (res.code === 1) {
                            this.$message.success('展厅状态已经更改成功！');
                            this.handleQuery();
                        } else {
                            this.$message.error(res.data.msg || '操作失败');
                        }
                    })
                    .catch(err => {
                        this.$message.error('请求出错了：' + err);
                    });
            });
        },
        // 全部操作
        handleSelectionChange(val) {
            let checkArr = [];
            val.forEach(n => {
                checkArr.push(n.id);
            });
            this.checkList = checkArr;
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.init();
        },
        handleCurrentChange(val) {
            this.page = val;
            this.init();
        },
    },
};
</script>
  
<style scoped>
/* 样式内容可以根据需求自定义 */
</style>
  